<template>
  <div>
    <!--导航栏-->
    <van-nav-bar
      title="加班"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="iphoneH">
      <van-form @submit="onSubmit">
        <van-cell title="加班人" value="内容" >
          {{username}}
        </van-cell>
        <van-cell is-link title="开始时间" value="内容" @click="startTimeShowPopup" size="large">
          {{data.startTime}}
        </van-cell>
        <van-cell is-link title="结束时间" value="内容" @click="endTimeShowPopup" size="large">
          {{data.endTime}}
        </van-cell>
        <van-field
          v-model="data.leaveReson"
          label="加班原因"
          placeholder="请输入"
          :rules="[{ required: true, message: '加班原因' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>


    <!--开始-->
    <van-popup
      v-model="startTimeshow"
      position="bottom"
      :style="{ height: '20%' }"
    >
      <van-datetime-picker
        v-model="data.startTime"
        type="datetime"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="confirmStartTime"
        @cancel="cancelStartTime"
      />
    </van-popup>

    <!--结束-->
    <van-popup
      v-model="endTimeshow"
      position="bottom"
      :style="{ height: '20%' }"
    >
      <van-datetime-picker
        v-model="data.endTime"
        type="datetime"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="confirmEndTime"
        @cancel="cancelEndTime"
      />
    </van-popup>
  </div>
</template>

<script>
  import {Toast} from "vant";
  import Vacation from "@/api/Vacation";
  export default {
    data() {
      return {
        startTimeshow: false,
        endTimeshow: false,
        username:this.$store.getters.userInfo.nickName,
        data: {
          startTime: '',
          endTime: '',
          leaveReson: '',
        },
        minDate: new Date(2020, 4, 1),
        maxDate: new Date(2025, 12, 1),
        currentDate:null,
      };
    },
    methods: {
      // T和Z时间转换
      changeDate(oldDate) {
        var dateee = new Date(oldDate).toJSON();//这个ie不兼容，会返回1970年的时间
        var date = new Date(+new Date(dateee) + 8 * 3600 * 1000)
          .toISOString()
          .replace(/T/g, " ")
          .replace(/\.[\d]{3}Z/, "");
        return date;
      },
      onClickLeft() {
        this.$router.push('/work')
      },
      startTimeShowPopup() {
        this.startTimeshow = true;
      },
      endTimeShowPopup() {
        this.endTimeshow = true;
      },
      //确认时间
      confirmStartTime(value){
        this.data.startTime = this.changeDate(value);
        this.startTimeshow = false;
      },
      confirmEndTime(value){
        this.data.endTime = this.changeDate(value);
        this.endTimeshow = false;
      },
      //取消
      cancelStartTime(){
        this.startTimeshow = false;
      },
      cancelEndTime(){
        this.endTimeshow = false;
      },
      onSubmit() {
        Toast.loading({
          message: '提交中...',
          forbidClick: true,
        });
        Vacation.addVacation({
          userId: this.$store.getters.userInfo.userId,
          nickName: this.$store.getters.userInfo.nickName,
          vacationType: 2, //出勤休假类型（1：请假，2：加班，3：出差）
          startTime: this.changeDate(this.data.startTime),
          endTime: this.changeDate(this.data.endTime),
          leaveReson: this.data.leaveReson,
        })
          .then(res => {
            // 返回数据
            Toast.success('提交成功');
            this.data.leaveReson = '';
            this.data.startTime = '';
            this.data.endTime = '';
          })
          .catch(err => {
            // 异常情况
          })
      },
    }
  }
</script>

<style scoped>
  .iphoneH {
    height: 700px;
  }

</style>
